import React from "react";
import {
    Tabs,
    TabList,
    Tab,
    TabPanel,
    TabPanels,
} from '@chakra-ui/react'
import SignIn from "./SignIn";
import SignUp from "./SignUp";

function App() {
    return (
        <div style={{ padding: '50px' }}>
            <Tabs
                isFitted={false}
                align="center"
                size="lg"
                variant="line"
                w={300}
                px={50}
                pt={50}
                pb={30}
                borderRadius="4px"
                backgroundColor="#fff"
                boxShadow="0 0 8px rgb(0 0 0 / 10%)"
                boxSizing="content-box"
                borderColor="transparent"
            >
                <TabList>
                    <Tab
                        _focus={{ boxShadow: "none" }}
                        fontWeight={700}
                        _selected={{ color: 'brand.main', borderBottomWidth: '2px', borderBottomStyle: 'solid', borderBottomColor: 'brand.main' }}
                        color="brand.sub"
                    >登录</Tab>
                    <Tab
                        _focus={{ boxShadow: "none" }}
                        fontWeight={700}
                        _selected={{ color: 'brand.main', borderBottomWidth: '2px', borderBottomStyle: 'solid', borderBottomColor: 'brand.main' }}
                        color="brand.sub"
                    >注册</Tab>
                </TabList>
                <TabPanels>
                    <TabPanel>
                        <SignIn />
                    </TabPanel>
                    <TabPanel>
                        <SignUp />
                    </TabPanel>
                </TabPanels>
            </Tabs>
        </div>
    );
}

export default App;
